{% extends "trees/base.html" %}
{% block title %}GIS Map - JM3{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
  #map { height: 68vh; width: 100%; border-radius: 8px; }
  .legend { background:#fff; padding:6px 10px; border-radius:6px; line-height:1.6; font-size:.8rem; box-shadow:0 1px 4px rgba(0,0,0,.3); }
  .legend i { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px; }
</style>
{% endblock %}
{% block content %}
<h2 class="mb-3">JM3 GIS Map</h2>
<div class="row mb-3 g-2">
  {% if is_admin %}
  <div class="col-6 col-md-3">
    <select id="filterOrg" class="form-select form-select-sm">
      <option value="">All Organizations</option>
      {% for org in organizations %}<option value="{{ org.id }}">{{ org.name }}</option>{% endfor %}
    </select>
  </div>
  {% endif %}
  <div class="col-6 col-md-3">
    <select id="filterSpecies" class="form-select form-select-sm">
      <option value="">All Species</option>
      {% for sp in species_list %}<option value="{{ sp.id }}">{{ sp.common_name }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-6 col-md-3">
    <select id="filterHealth" class="form-select form-select-sm">
      <option value="">All Health</option>
      <option value="alive">Alive - Healthy</option>
      <option value="stressed">Alive - Stressed</option>
      <option value="dead">Dead</option>
    </select>
  </div>
  <div class="col-6 col-md-3">
    <select id="filterVerify" class="form-select form-select-sm">
      <option value="">All Verification</option>
      <option value="verified">Verified</option>
      <option value="pending">Pending</option>
      <option value="suspicious">Suspicious</option>
    </select>
  </div>
</div>
<div class="form-check form-check-inline mb-2">
  <input class="form-check-input" type="checkbox" id="showNurseries" checked>
  <label class="form-check-label" for="showNurseries">Show nurseries 🏠</label>
</div>
<div id="map"></div>
{% endblock %}
{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map('map').setView([-1.286389, 36.817223], 7);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);

  const treeLayer = L.geoJSON(null, {
    pointToLayer: (f, latlng) => L.circleMarker(latlng, {
      radius: 7, fillColor: f.properties.color, color: '#333', weight: 1, fillOpacity: 0.85
    }),
    onEachFeature: (f, layer) => {
      const p = f.properties;
      layer.bindPopup(`<strong>${p.tag_code}</strong><br>${p.species}<br>${p.organization}<br>Health: ${p.health_label}<br>Verification: ${p.verification}<br><a href="${p.url}">View details</a>`);
    }
  }).addTo(map);

  const nurseryLayer = L.geoJSON(null, {
    pointToLayer: (f, latlng) => L.marker(latlng),
    onEachFeature: (f, layer) => {
      const p = f.properties;
      const s = p.survival === null ? 'no data' : p.survival + '%';
      layer.bindPopup(`<strong>🏠 ${p.name}</strong><br>Owner: ${p.owner || '—'}<br>Seedlings: ${p.capacity}<br>Sourced trees: ${p.sourced}<br>Verified survival: ${s}`);
    }
  }).addTo(map);

  function loadTrees() {
    const params = new URLSearchParams();
    const map_ = {organization:'filterOrg', species:'filterSpecies', health:'filterHealth', verification:'filterVerify'};
    for (const [key, id] of Object.entries(map_)) {
      const v = document.getElementById(id).value;
      if (v) params.set(key, v);
    }
    fetch("{% url 'trees_geojson' %}?" + params.toString())
      .then(r => r.json())
      .then(data => {
        treeLayer.clearLayers();
        treeLayer.addData(data);
        if (data.features.length) map.fitBounds(treeLayer.getBounds(), { maxZoom: 13 });
      });
  }

  function loadNurseries() {
    fetch("{% url 'nurseries_geojson' %}")
      .then(r => r.json())
      .then(data => { nurseryLayer.clearLayers(); nurseryLayer.addData(data); });
  }

  ['filterOrg','filterSpecies','filterHealth','filterVerify'].forEach(id =>
    document.getElementById(id).addEventListener('change', loadTrees));
  document.getElementById('showNurseries').addEventListener('change', e => {
    if (e.target.checked) map.addLayer(nurseryLayer); else map.removeLayer(nurseryLayer);
  });

  const legend = L.control({position:'bottomright'});
  legend.onAdd = () => {
    const div = L.DomUtil.create('div', 'legend');
    div.innerHTML = '<i style="background:#2e7d32"></i>Alive<br><i style="background:#f9a825"></i>Stressed<br><i style="background:#c62828"></i>Dead<br>📍 Nursery';
    return div;
  };
  legend.addTo(map);

  loadTrees();
  loadNurseries();
</script>
{% endblock %}